{% extends 'common/panel.html' %}

{% load percentage %}

{% block title %}Area of Interest Physical Conservation Report{% endblock %}
{% block panel %}

<div class='freetext'>

<h3>Benthic</h3>
<p>
<table  style='width:430px' class='analysis_container'>
    <tbody>
        <tr class="grey">
            <td colspan="3">
                <b>Benthic Habitats -- Depths</b>
                <img src="/media/wmm/img/info.png" id="info_benthic_habitat" class="aoi_info"/>
            </td>
        </tr>
        {% if benthic_depth_count > 0 %}
        {% for depth in benthic_depths %}
        <tr>
            <td class="left">{{depth.0}}</td>
            <td class="right">{{depth.1|floatformat:1}} sq miles </td>
            <td class="right">({{depth.2|percentage:1}} of available {{depth.0}})</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td></td>
            <td>None Found</td>
            <td></td>
        </tr>
        {% endif %}
    </tbody>
</table>
<table  style='width:430px' class='analysis_container'>
    <tbody>
        <tr class="grey">
            <td colspan="3">
                <b>Benthic Habitats -- Geomorphologies</b>
                <img src="/media/wmm/img/info.png" id="info_benthic_habitat" class="aoi_info"/>
            </td>
        </tr>
        {% if benthic_geomorph_count > 0 %}
        {% for geomorph in benthic_geomorphs %}
        <tr>
            <td class="left">{{geomorph.0}}</td>
            <td class="right">{{geomorph.1|floatformat:1}} sq miles </td>
            <td class="right">({{geomorph.2|percentage:1}} of available {{geomorph.0}})</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td></td>
            <td>None Found</td>
            <td></td>
        </tr>
        {% endif %}
    </tbody>
</table>
<table  style='width:430px' class='analysis_container'>
    <tbody>
        <tr class="grey">
            <td colspan="3">
                <b>Benthic Habitats -- Substrates</b>
                <img src="/media/wmm/img/info.png" id="info_benthic_habitat" class="aoi_info"/>
            </td>
        </tr>
        {% if benthic_substrate_count > 0 %}
        {% for substrate in benthic_substrates %}
        <tr>
            <td class="left">{{substrate.0}}</td>
            <td class="right">{{substrate.1|floatformat:1}} sq miles </td>
            <td class="right">({{substrate.2|percentage:1}} of available {{substrate.0}})</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td></td>
            <td>None Found</td>
            <td></td>
        </tr>
        {% endif %}
    </tbody>
</table>
<table  style='width:430px' class='analysis_container'>
    <tbody>
        <tr class="grey">
            <td></td>
            <td><b>Canyons</b><img src="/media/wmm/img/info.png" id="info_canyons" class="aoi_info"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>{{canyon_area|floatformat:1}} sq miles ({{canyon_perc|percentage:1}} of your Area)</td>
            <td></td>
        </tr>
    </tbody>
</table>
<table  style='width:430px' class='analysis_container'>
    <tbody>
        <tr class="grey">
            <td></td>
            <td><b>Rocky Substrates</b><img src="/media/wmm/img/info.png" id="info_rocky_substrates" class="aoi_info"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>{{rocky_substrate_area|floatformat:1}} sq miles ({{rocky_substrate_perc|percentage:1}} of your Area)</td>
            <td></td>
        </tr>
    </tbody>
</table>

<h3>Nearshore</h3>
<p>
<table  style='width:430px' class='analysis_container'>
    <tbody>
        <tr class="grey">
            <td colspan="3"><b>Estuary Habitats</b><img src="/media/wmm/img/info.png" id="info_estuary_habitats" class="aoi_info"/></td>
        </tr>
        {% if estuary_habitat_count > 0 %}
        {% for habitat in estuary_habitats %}
        <tr>
            <td class="left">{{habitat.0}}</td>
            <td class="right">{{habitat.1|floatformat:1}} sq miles </td>
            <td class="right">({{habitat.2|percentage:1}} of available {{habitat.0}})</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td></td>
            <td>None Found</td>
            <td></td>
        </tr>
        {% endif %}
    </tbody>
</table>
<table  style='width:430px' class='analysis_container'>
    <tbody>
        <tr class="grey">
            <td colspan="3"><b>Estuary Substrates</b><img src="/media/wmm/img/info.png" id="info_estuary_substrates" class="aoi_info"/></td>
        </tr>
        {% if estuary_substrate_count > 0 %}
        {% for substrate in estuary_substrates %}
        <tr>
            <td class="left">{{substrate.0}}</td>
            <td class="right">{{substrate.1|floatformat:1}} sq miles </td>
            <td class="right">({{substrate.2|percentage:1}} of available {{substrate.0}})</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td></td>
            <td>None Found</td>
            <td></td>
        </tr>
        {% endif %}
    </tbody>
</table>

<h3>Islands <img src="/media/wmm/img/info.png" id="info_islands" class="aoi_info"/></h3>
<p>
<table  style='width:430px' class='analysis_container'>
    <tbody>
        <tr class="grey">
            <td><b>Number</b></td>
            <td><b>Area</b></td>
            <td><b>Percentage of Shape</b></td>
        </tr>
        <tr>
            <td>{{island_count}}</td>
            <td>{{island_area|floatformat:1}} sq miles</td>
            <td>{{island_perc|percentage:1}}</td>
        </tr>
    </tbody>
</table>

<h3>Open Water</h3>
<p>
<table  style='width:430px' class='analysis_container'>
    <tbody>
        <tr class="grey">
            <td colspan="3"><b>Upwelling Areas</b><img src="/media/wmm/img/info.png" id="info_upwelling" class="aoi_info"/></td>
        </tr>
        {% if upwelling_count > 0 %}
        {% for upwelling in upwellings %}
        <tr>
            <td class="left">{{upwelling.0}}</td>
            <td class="right">{{upwelling.1|floatformat:1}} sq miles </td>
            <td class="right">({{upwelling.2|percentage:1}} of available {{upwelling.0}})</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td></td>
            <td>None Found</td>
            <td></td>
        </tr>
        {% endif %}
    </tbody>
</table>

<h3></h3>
<p>
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId, srcId) {
   $("#"+divId).toggle();
    if ($("#"+srcId).text() == 'Learn More') { 
        $("#"+srcId).text('Hide Text'); 
    } else { 
        $("#"+srcId).text('Learn More'); 
    }
}

</script>

<style type="text/css">
table.analysis_container td.left {
    text-align: left;
}
table.analysis_container td.center {
    text-align: center;
}
table.analysis_container td.right {
    text-align: right;
}
</style>

{% endblock %}